<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="clearfix" slot="header">
        <span class="el-icon-document">已发任务</span>
        <el-button
          style="float: right"
          size="mini"
          type="danger"
          @click="goBack"
          >关闭</el-button
        >
      </div>
      <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
        <!--表单信息-->
        <!-- <el-tab-pane label="表单信息" name="1">
          <el-col :span="16" :offset="4">
            <v-form-render ref="vFormRef" />
          </el-col>
        </el-tab-pane> -->
        <!--流程流转记录-->
        <el-tab-pane label="流转记录" name="2">
          <el-col :span="16" :offset="4">
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  v-for="(item, index) in flowRecordList"
                  :key="index"
                  :icon="setIcon(item.finishTime)"
                  :color="setColor(item.finishTime)"
                >
                  <p style="font-weight: 700">{{ item.taskName }}</p>
                  <el-card :body-style="{ padding: '10px' }">
                    <el-descriptions
                      class="margin-top"
                      :column="1"
                      size="small"
                                          >
                      <el-descriptions-item
                        v-if="item.assigneeName"
                        label-class-name="my-label"
                      >
                        <template #label>
                          <i class="el-icon-user"></i>办理人
                        </template>
                        {{ item.assigneeName }}
                        <el-tag type="info" size="mini">{{
                          item.deptName
                        }}</el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.candidate"
                        label-class-name="my-label"
                      >
                        <template #label>
                          <i class="el-icon-user"></i>候选办理
                        </template>
                        {{ item.candidate }}
                      </el-descriptions-item>
                      <el-descriptions-item label-class-name="my-label">
                        <template #label>
                          <i class="el-icon-date"></i>接收时间
                        </template>
                        {{ item.createTime }}
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.finishTime"
                        label-class-name="my-label"
                      >
                        <template #label>
                          <i class="el-icon-date"></i>处理时间
                        </template>
                        {{ item.finishTime }}
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.duration"
                        label-class-name="my-label"
                      >
                        <template #label>
                          <i class="el-icon-time"></i>耗时
                        </template>
                        {{ item.duration }}
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.comment"
                        label-class-name="my-label"
                      >
                        <template #label>
                          <i class="el-icon-tickets"></i>处理意见
                        </template>
                        {{ item.comment.comment }}
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-tab-pane>
        <!--流程图-->
        <el-tab-pane label="流程图" name="3">
          <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { flowRecord } from "@/api/flowable/finished";
import { getProcessVariables, flowXmlAndNode } from "@/api/flowable/definition";
import BpmnViewer from "@/components/Process/viewer";
// import VFormRender from "@/components/VFormRender";

const route = useRoute();
const router = useRouter();
const activeName = ref("2");
const flowData = ref({});
const flowRecordList = ref([]);
const taskForm = ref({
  multiple: false,
  comment: "",
  procInsId: "",
  instanceId: "",
  deployId: "",
  taskId: "",
  procDefId: "",
});

const vFormRef = ref(null);

const handleClick = (tab, event) => {
  if (tab.paneName === "3") {
    flowXmlAndNode({
      procInsId: taskForm.value.procInsId,
      deployId: taskForm.value.deployId,
    }).then((res) => {
      flowData.value = res.data;
    });
  }
};

const setIcon = (val) => {
  return val ? "el-icon-check" : "el-icon-time";
};

const setColor = (val) => {
  return val ? "#2bc418" : "#b3bdbb";
};

const getFlowRecordList = (procInsId, deployId) => {
  const params = { procInsId, deployId };
  flowRecord(params)
    .then((res) => {
      flowRecordList.value = res.data.flowList;
    })
    .catch(() => {
      goBack();
    });
};

const processVariables = (taskId) => {
  if (taskId) {
    getProcessVariables(taskId).then((res) => {
      nextTick(() => {
        console.log(res, "表单信息");

        // vFormRef.value.setFormJson(res.data.formJson);

        vFormRef.value = res.data.formJson;
        nextTick(() => {
          // vFormRef.value.setFormData(res.data);

          vFormRef.value = res.data.formJson;
          nextTick(() => {
            // vFormRef.value.disableForm();
          });
        });
      });
    });
  }
};

const goBack = () => {
  const obj = { path: "/task/process", query: { t: Date.now() } };
  router.push(obj);
};

onMounted(() => {
  taskForm.value.deployId = route.query.deployId;
  taskForm.value.taskId = route.query.taskId;
  taskForm.value.procInsId = route.query.procInsId;
  processVariables(taskForm.value.taskId);
  getFlowRecordList(taskForm.value.procInsId, taskForm.value.deployId);
});
</script>

<style lang="scss" scoped>
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.my-label {
  background: #e1f3d8;
}
</style>
